import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'dva';
import { Form, message, Spin, Table } from 'antd';
import request from '@/utils/request';
import { useUpdateEffect } from '@umijs/hooks';

const cellStyle = {
  maxWidth: 300,
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  cursor: 'pointer',
};

const namespace = 'formManage';

function ElementDriveRuleInfo(props) {
  const [loading, setLoading] = useState(false);

  // 保存每次请求回填表单值
  const [elementDriveRuleData, setElementDriveRuleData] = useState([]);

  // 当dva:fromVersionId 变化的时候进行异步请求回填表单
  useEffect(() => {
    if (props.selectForm && props.selectForm.formVersionId) {
      queryElementDriveRule();
    } else {
      setElementDriveRuleData([]);
    }
  }, [props.selectForm]);

  const queryElementDriveRule = () => {
    setElementDriveRuleData([]);
    setLoading(true);
    request('pmc/pcms/element/queryDriveRuleList', {
      data: { formVersionId: props.selectForm.formVersionId },
    }).then(res => {
      if (res && res.success == true && res.data && res.data) {
        setLoading(false);
        setElementDriveRuleData(res.data);
      } else {
        if (res && res.errMessage) {
          message.error(res.errMessage);
        } else {
          message.error('查询元素驱动规则失败');
        }
      }
    });
  };

  const driveTypeMap = {
    hide: '隐藏',
    show: '显示',
    calc: '设置值',
    setOptions: '设置选项',
    required: '设置必填',
    notRequired: '设置非必填',
  };

  const columns = [
    {
      title: '规则名称',
      dataIndex: 'ruleName',
    },
    // {
    //   title: '规则编码',
    //   dataIndex: 'ruleCode'
    // },
    {
      title: '驱动类型',
      dataIndex: 'driveType',
      render: text => (driveTypeMap[text] ? driveTypeMap[text] : text),
    },
    // {
    //   title: '触发元素编码',
    //   dataIndex: 'triggerEleCode'
    // },
    {
      // title: '触发元素规则表达式',
      title: '触发条件',
      dataIndex: 'triggerEleRuleExpr',
    },
    {
      // title: '目标元素编码',
      title: '目标字段',
      dataIndex: 'targetEleCode',
    },
    {
      // title: '目标元素规则表达式',
      title: '计算公式',
      dataIndex: 'targetEleRuleExpr',
    },
  ];

  return (
    <Spin spinning={loading}>
      <div style={{ margin: 16 }}>
        <Table
          style={{ margin: '16px 0 16px 0' }}
          rowKey={record => record.ruleId}
          columns={columns}
          pagination={false}
          dataSource={elementDriveRuleData}
        />
      </div>
    </Spin>
  );
}
export default connect(({ formManage }) => ({
  selectForm: formManage.selectForm,
}))(Form.create({})(ElementDriveRuleInfo));
